<template>
  <div class="welcome-container">
    <!-- 头部区域 -->
    <div class="welcome-header">
      <div class="user-profile">
        <div class="avatar">
          <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="用户头像" class="avatar-image">
          <i v-else class="iconfont icon-user"></i>
        </div>
        <div class="user-info">
          <h2 class="company-name">{{ userInfo.company }}</h2>
          <div class="personal-info">
            <span class="name">{{ userInfo.real_name }}</span>
            <span class="account">账号: {{ userInfo.username }}</span>
            <span
              class="permission-tag"
              :class="getPermissionClass(userInfo.permission)"
            >
              {{ getPermissionText(userInfo.permission) }}
            </span>
          </div>
        </div>
      </div>
      <div class="button-group">
        <button class="change-password primary" @click="showPasswordPopup">
          <i class="iconfont icon-lock"></i>
          <span>修改密码</span>
        </button>
        <button class="change-password" @click="showProfilePopup">
          <i class="iconfont icon-user"></i>
          <span>修改资料</span>
        </button>
      </div>
    </div>

    <!-- 功能卡片区域 -->
    <div class="welcome-grid">
      <!-- 员工列表 -->
      <!-- <div 
        class="welcome-card" 
        :class="{disabled: userInfo.permission !== 'superadmin'}" 
        @click="userInfo.permission === 'superadmin' ? navigateTo('staff') : null"
      >
        <div class="card-icon">
          <i class="iconfont icon-group"></i>
        </div>
        <div class="card-content">
          <h3>员工列表</h3>
          <p>查看和管理公司员工信息</p>
        </div>
        <div v-if="userInfo.permission !== 'superadmin'" class="info">无权限</div>
      </div> -->

      <!-- 营业额统计 -->
      <div class="welcome-card" @click="navigateTo('money')">
        <div class="card-icon">
          <i class="iconfont icon-money"></i>
        </div>
        <div class="card-content">
          <h3>营业额统计</h3>
          <p>管理分析营业额</p>
        </div>
      </div>
      <!-- 服务类型 -->
      <div class="welcome-card" @click="navigateTo('category')">
        <div class="card-icon">
          <i class="iconfont icon-goods"></i>
        </div>
        <div class="card-content">
          <h3>服务类型</h3>
          <p>管理服务分类和规格</p>
        </div>
      </div>
      <!-- 订单渠道 -->
      <div class="welcome-card" @click="navigateTo('source')">
        <div class="card-icon">
          <i class="iconfont icon-goods"></i>
        </div>
        <div class="card-content">
          <h3>订单渠道</h3>
          <p>管理订单渠道来源</p>
        </div>
      </div>
      <div class="welcome-card" @click="navigateTo('payMethod')">
        <div class="card-icon">
          <i class="iconfont icon-goods"></i>
        </div>
        <div class="card-content">
          <h3>支付方式</h3>
          <p>管理支付方式</p>
        </div>
      </div>

      <!-- 数据导出 -->
      <div class="welcome-card" @click="navigateTo('')">
        <div class="card-icon">
          <i class="iconfont icon-download"></i>
        </div>
        <div class="card-content">
          <h3>数据导出</h3>
          <p>导出系统数据报表</p>
        </div>
      </div>

      <!-- 回收站 -->
      <div class="welcome-card" @click="navigateTo('')">
        <div class="card-icon">
          <i class="iconfont icon-delete"></i>
        </div>
        <div class="card-content">
          <h3>回收站</h3>
          <p>查看和管理已删除内容</p>
        </div>
      </div>

      <!-- 系统教程 -->
      <div class="welcome-card" @click="navigateTo('')">
        <div class="card-icon">
          <i class="iconfont icon-help"></i>
        </div>
        <div class="card-content">
          <h3>系统教程</h3>
          <p>学习系统使用指南</p>
        </div>
      </div>
    </div>

    <!-- 修改密码弹窗 -->
    <div
      class="dialog-overlay"
      :class="{ active: showPasswordDialog }"
      v-if="showPasswordDialog"
    >
      <!-- 云朵装饰 -->
      <div class="cloud cloud-1"><i class="iconfont icon-cloud"></i></div>
      <div class="cloud cloud-2"><i class="iconfont icon-cloud"></i></div>
      <div class="cloud cloud-3"><i class="iconfont icon-cloud"></i></div>

      <!-- 星星装饰 -->
      <div class="decoration star-1"><i class="iconfont icon-star"></i></div>
      <div class="decoration star-2"><i class="iconfont icon-star"></i></div>
      <div class="decoration star-3"><i class="iconfont icon-star"></i></div>

      <div class="dialog-content" :class="{ 'bounce-in': showPasswordDialog }">
        <div class="dialog-header">
          <div class="dialog-title">
            <h2>修改密码</h2>
            <div class="title-underline"></div>
          </div>
          <button class="close-btn" @click="showPasswordDialog = false">
            <i class="iconfont icon-close"></i>
          </button>
        </div>

        <div class="dialog-body">
          <div class="form-group">
            <label>
              <i class="iconfont icon-lock"></i>
              原密码
            </label>
            <input
              v-model="passwordForm.oldPassword"
              type="password"
              class="form-input"
              placeholder="请输入原密码"
            />
          </div>

          <div class="form-group">
            <label>
              <i class="iconfont icon-lock"></i>
              新密码
            </label>
            <input
              v-model="passwordForm.newPassword"
              type="password"
              class="form-input"
              placeholder="请输入新密码"
            />
          </div>

          <div class="form-group">
            <label>
              <i class="iconfont icon-lock"></i>
              确认新密码
            </label>
            <input
              v-model="passwordForm.confirmPassword"
              type="password"
              class="form-input"
              placeholder="请再次输入新密码"
            />
          </div>
        </div>

        <div class="dialog-footer">
          <button class="btn cancel-btn" @click="showPasswordDialog = false">
            <i class="iconfont icon-close"></i>取消
          </button>
          <button
            class="btn submit-btn"
            @click="handlePasswordSubmit"
            :disabled="passwordLoading"
          >
            <i class="iconfont icon-save"></i>确认修改
          </button>
        </div>
      </div>
    </div>

    <!-- 修改资料弹窗 -->
    <div
      class="dialog-overlay"
      :class="{ active: showProfileDialog }"
      v-if="showProfileDialog"
    >
      <!-- 云朵装饰 -->
      <div class="cloud cloud-1"><i class="iconfont icon-cloud"></i></div>
      <div class="cloud cloud-2"><i class="iconfont icon-cloud"></i></div>
      <div class="cloud cloud-3"><i class="iconfont icon-cloud"></i></div>

      <!-- 星星装饰 -->
      <div class="decoration star-1"><i class="iconfont icon-star"></i></div>
      <div class="decoration star-2"><i class="iconfont icon-star"></i></div>
      <div class="decoration star-3"><i class="iconfont icon-star"></i></div>

      <div class="dialog-content" :class="{ 'bounce-in': showProfileDialog }">
        <div class="dialog-header">
          <div class="dialog-title">
            <h2>修改资料</h2>
            <div class="title-underline"></div>
          </div>
          <button class="close-btn" @click="showProfileDialog = false">
            <i class="iconfont icon-close"></i>
          </button>
        </div>

        <div class="dialog-body">
          <!-- 头像上传区域 -->
          <div class="form-group avatar-upload-group">
            <label>
              <i class="iconfont icon-user"></i>
              头像
            </label>
            <div class="avatar-upload-container">
              <div class="avatar-preview" :style="{ backgroundImage: `url(${avatarUrl || userAvatar})` }">
                <input
                  type="file"
                  id="avatar-input"
                  accept="image/*"
                  @change="handleAvatarChange"
                  class="avatar-input"
                />
                <label for="avatar-input" class="avatar-upload-btn">
                  <i class="iconfont icon-camera"></i>
                </label>
              </div>
              <span class="avatar-hint">点击更换头像（支持JPG、PNG格式，不超过2MB）</span>
            </div>
          </div>
          
          <div class="form-group">
            <label>
              <i class="iconfont icon-user"></i>
              真实姓名
            </label>
            <input
              v-model="profileForm.real_name"
              class="form-input"
              placeholder="请输入真实姓名"
            />
          </div>

          <div class="form-group">
            <label>
              <i class="iconfont icon-phone"></i>
              联系电话
            </label>
            <input
              v-model="profileForm.mobile"
              class="form-input"
              placeholder="请输入联系电话"
            />
          </div>

          <div class="form-group">
            <label>
              <i class="iconfont icon-phone"></i>
              职位
            </label>
            <input
              v-model="profileForm.position"
              class="form-input"
              placeholder="请输入职位"
            />
          </div>

          <div class="form-group">
            <label>
              <i class="iconfont icon-company"></i>
              公司名称
            </label>
            <input
              v-model="profileForm.company"
              class="form-input"
              placeholder="请输入公司名称"
            />
          </div>
          
          <!-- 新增的字段 -->
          <div class="form-group">
            <label>
              <i class="iconfont icon-email"></i>
              电子邮箱
            </label>
            <input
              v-model="profileForm.email"
              type="email"
              class="form-input"
              placeholder="请输入电子邮箱"
            />
          </div>
          
          <div class="form-group">
            <label>
              <i class="iconfont icon-gender"></i>
              性别
            </label>
            <select v-model="profileForm.gender" class="form-input">
              <option value="0">未知</option>
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
          </div>
          
          <div class="form-group">
            <label>
              <i class="iconfont icon-money"></i>
              底薪
            </label>
            <input
              v-model="profileForm.basic_salary"
              type="number"
              step="0.01"
              class="form-input"
              placeholder="请输入底薪"
            />
          </div>
          
          <!-- 仅对子账号显示的独立手机号 -->
          <div class="form-group" v-if="userInfo.is_sub_account">
            <label>
              <i class="iconfont icon-mobile"></i>
              子账号手机号
            </label>
            <input
              v-model="profileForm.sub_mobile"
              type="tel"
              class="form-input"
              placeholder="请输入子账号手机号"
            />
            <span class="form-hint">子账号独立手机号，用于登录验证</span>
          </div>
        </div>

        <div class="dialog-footer">
          <button class="btn cancel-btn" @click="showProfileDialog = false">
            <i class="iconfont icon-close"></i>取消
          </button>
          <button
            class="btn submit-btn"
            @click="handleProfileSubmit"
            :disabled="profileLoading"
          >
            <i class="iconfont icon-save"></i>保存修改
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { vToast } from "@/plugins/vToast";
import { get, post, upload } from "@/request";
import { useUserInfoStore } from "@/store/userInfoStore";

const router = useRouter();

// 用户信息
const userInfo = ref({
  username: "",
  real_name: "",
  company: "",
  phone: "",
  permission: "",
  position: "",
});

// 修改密码相关状态
const showPasswordDialog = ref(false);
const passwordLoading = ref(false);
const passwordForm = ref({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});

// 修改资料相关状态
const showProfileDialog = ref(false);
const profileLoading = ref(false);
const profileForm = ref({
  real_name: "",
  mobile: "",
  position: "",
  company: "",
  // 新增字段
  email: "",
  gender: 0, // 0=未知, 1=男, 2=女
  basic_salary: 0.00,
  sub_mobile: "",
});

// 头像相关状态
const avatarUrl = ref('');

// 计算头像URL（优先使用localStorage中的用户头像，如果没有则使用默认头像）
const userAvatar = computed(() => {
  const storedUserInfo = localStorage.getItem('userInfo');
  if (storedUserInfo) {
    try {
      const parsedInfo = JSON.parse(storedUserInfo);
      if (parsedInfo.avatar) {
        // 假设头像URL是相对路径，需要加上基础URL
        return parsedInfo.avatar;
      }
    } catch (error) {
      console.error('解析用户信息失败:', error);
    }
  }
  // 默认头像
  return '/images/noImage.svg';
});

// 获取权限显示文本
const getPermissionText = (permission) => {
  const map = {
    superadmin: "超级管理员",
    admin: "管理员",
    member: "普通用户",
  };
  return map[permission] || permission;
};

// 获取权限对应的CSS类
const getPermissionClass = (permission) => {
  if (permission === "superadmin") return "superadmin";
  if (permission === "admin") return "admin";
  return "member";
};

// 获取用户信息
const getuserInfo = async () => {
  try {
    const res = await get("/user/info");
    if (res && res.code === 200) {
      userInfo.value = {
        username: res.data.username,
        real_name: res.data.real_name,
        company: res.data.company_name || res.data.company,
        phone: res.data.mobile || res.data.phone,
        permission: res.data.permission,
        avatar: res.data.avatar,
      };
    } else {
      vToast({ message: res?.msg || "获取用户信息失败" });
      if (res?.code === 401) {
        localStorage.removeItem("token");
        localStorage.removeItem("userInfo");
        // window.location.href = "/#/user/login";
      }
    }
  } catch (error) {
    vToast({ message: "获取用户信息失败" });
    console.error("获取用户信息失败:", error);
  }
};

// 导航方法
const navigateTo = (path) => {
  if (path.length > 1) {
    router.push({ name: path });
  }
};

// 显示修改密码弹窗
const showPasswordPopup = () => {
  passwordForm.value = {
    oldPassword: "",
    newPassword: "",
    confirmPassword: "",
  };
  showPasswordDialog.value = true;
};

// 显示修改资料弹窗
const showProfilePopup = () => {
  profileForm.value = {
    real_name: userInfo.value.real_name,
    mobile: userInfo.value.phone,
    position: userInfo.value.position,
    company: userInfo.value.company,
    // 初始化新增字段
    email: userInfo.value.email || '',
    gender: userInfo.value.gender || 0,
    basic_salary: userInfo.value.basic_salary || 0.00,
    sub_mobile: userInfo.value.sub_mobile || '',
  };
  // 重置头像相关状态
  avatarUrl.value = '';
  showProfileDialog.value = true;
};

// 处理头像文件选择
const handleAvatarChange = async (event) => {
  const file = event.target.files[0];
  if (file) {
    // 检查文件类型
    if (!file.type.startsWith('image/')) {
      vToast({ message: '请选择图片文件' });
      return;
    }
    
    // 检查文件大小（限制为2MB）
    if (file.size > 2 * 1024 * 1024) {
      vToast({ message: '图片文件大小不能超过2MB' });
      return;
    }
    
    // 预览头像
    const reader = new FileReader();
    reader.onload = (e) => {
      avatarUrl.value = e.target.result;
    };
    reader.readAsDataURL(file);
    
    // 选择文件后立即上传
    await uploadAvatar(file);
  }
};

// 上传头像
const uploadAvatar = async (file) => {
  if (!file) {
    return Promise.resolve(null);
  }
  
  try {
    // 显示上传中状态
    vToast({ message: '头像上传中...', duration: 0 });
    
    const formData = new FormData();
    formData.append('file', file); // 直接传递file对象
    
    const res = await upload('/user/uploadAvatar', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    
    // 清除上传中提示
    
    if (res && res.code === 200) {
      vToast({ message: '头像上传成功' });
      
      // 使用Pinia store更新头像信息，这样topNav会自动响应状态变化
      const userInfoStore = useUserInfoStore();
      // 从返回数据中提取avatar_url字段
      userInfoStore.updateAvatar(res.data.avatar_url);
      
      // 重新从服务器获取完整用户信息
      getuserInfo();
      return res.data; // 返回头像URL
    } else {
      vToast({ message: res?.msg || '头像上传失败' });
      return null;
    }
  } catch (error) {
    console.error('上传头像失败:', error);
    vToast({ message: '头像上传失败' });
    return null;
  }
};

// 提交修改密码
const handlePasswordSubmit = async () => {
  if (!passwordForm.value.oldPassword || !passwordForm.value.newPassword) {
    vToast({ message: "请填写完整密码信息" });
    return;
  }

  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    vToast({ message: "两次输入的新密码不一致" });
    return;
  }

  passwordLoading.value = true;
  try {
    const res = await post("/user/changePass", {
      old_password: passwordForm.value.oldPassword,
      new_password: passwordForm.value.newPassword,
    });

    if (res && res.code === 200) {
      localStorage.removeItem("token");
      localStorage.removeItem("userInfo");
      vToast({ message: "密码修改成功，请重新登录" });
      setTimeout(() => {
        // window.location.href = "/#/user/login";
      }, 500);
      showPasswordDialog.value = false;
    } else {
      vToast({ message: res.msg });
    }
  } catch (error) {
    console.error("修改密码失败:", error);
    vToast({ message: "修改密码失败" });
  } finally {
    passwordLoading.value = false;
  }
};

// 提交修改资料
const handleProfileSubmit = async () => {
  if (!profileForm.value.real_name) {
    vToast({ message: "请填写真实姓名" });
    return;
  }

  profileLoading.value = true;
  try {
    // 头像已经在选择时上传了，这里只需要提交其他资料
    const res = await post("/user/update", profileForm.value);
    if (res && res.code === 200) {
      vToast({ message: "资料修改成功" });
      getuserInfo();
      showProfileDialog.value = false;
    }
  } catch (error) {
    console.error("修改资料失败:", error);
    vToast({ message: "修改资料失败" });
  } finally {
    profileLoading.value = false;
  }
};

// 初始化用户信息
onMounted(() => {
  getuserInfo();
});
</script>

<style scoped lang="less">
.welcome-container {
  padding: 20px;
  background-color: var(--bs-bg-color);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.welcome-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--bs-border-color);
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--bs-bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .iconfont {
    font-size: 28px;
    color: var(--bs-theme-color);
  }
  
  .avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.button-group {
  display: flex;
  gap: 12px;
}

/* 表单提示文本样式 */
.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}

.company-name {
  margin: 0;
  font-size: 18px;
  color: var(--bs-dark-color);
}

.personal-info {
  display: flex;
  gap: 15px;
  align-items: center;

  .name {
    font-size: 16px;
    color: var(--bs-text-color);
    font-weight: 500;
  }

  .account {
    font-size: 14px;
    color: var(--bs-gray-color);
  }

  .permission-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;

    &.superadmin {
      background-color: #ff4d4f;
      color: white;
    }

    &.admin {
      background-color: #1890ff;
      color: white;
    }

    &.normal {
      background-color: #52c41a;
      color: white;
    }
  }
}

.change-password {
  padding: 8px 16px;
  background-color: white;
  border: 1px solid var(--bs-theme-color);
  color: var(--bs-theme-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;

  &:hover {
    background-color: var(--bs-bg-color);
  }

  .iconfont {
    font-size: 14px;
  }

  &.primary {
    background: var(--bs-theme-color);
    color: var(--bs-bg-color);
  }
}

.welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.welcome-card {
  background-color: white;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--bs-theme-color);
  }
  &.disabled {
    background: #eee;
    opacity: 0.6;
    border-color: #bbb;
    &:hover {
      transform: none;
      border-color: #bbb;
      box-shadow: none;
    }
  }
  .info {
    width: 100px;
    height: 30px;
    background: #666;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    border-radius: 0 0 0 9px;
  }
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--bs-bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;

  .iconfont {
    font-size: 24px;
    color: var(--bs-theme-color);
  }
}

.card-content {
  h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: var(--bs-dark-color);
  }

  p {
    margin: 0;
    font-size: 14px;
    color: var(--bs-gray-color);
  }
}

/* 弹窗样式 - 与之前保持一致 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  overflow: hidden;
  transition: background-color 0.3s ease-out;

  &.active {
    background-color: rgba(0, 0, 0, 0.45);
  }

  /* 云朵装饰 */
  .cloud {
    position: absolute;
    font-size: 80px;
    opacity: 0;
    animation: float 8s infinite ease-in-out;
    z-index: -1;
    transition: opacity 0.5s ease;
    color: white;

    &.cloud-1 {
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }
    &.cloud-2 {
      top: 60%;
      right: 15%;
      animation-delay: 1s;
    }
    &.cloud-3 {
      bottom: 10%;
      left: 25%;
      animation-delay: 2s;
    }
  }

  &.active .cloud {
    opacity: 0.1;
  }

  /* 星星装饰 */
  .decoration {
    position: absolute;
    font-size: 18px;
    animation: float 6s infinite ease-in-out;
    z-index: -1;
    color: var(--bs-theme-color);
    opacity: 0;

    &.star-1 {
      top: 15%;
      right: 15%;
      animation-delay: 0.5s;
    }
    &.star-2 {
      top: 70%;
      left: 15%;
      animation-delay: 1s;
    }
    &.star-3 {
      bottom: 15%;
      right: 20%;
      animation-delay: 1.5s;
    }
  }

  &.active .decoration {
    opacity: 0.1;
  }
}

/* 弹窗内容容器 */
.dialog-content {
  width: 500px;
  max-width: 90vw;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transform: translateY(40px) scale(0.95);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 100000;

  /* 弹入动画 */
  &.bounce-in {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* 弹窗头部 */
  .dialog-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bs-theme-color);
    color: white;
    position: relative;
    z-index: 2;

    .dialog-title {
      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }

      .title-underline {
        height: 2px;
        width: 40px;
        background: white;
        border-radius: 1px;
        margin-top: 6px;
      }
    }

    .close-btn {
      width: 32px;
      height: 32px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }
  }

  /* 弹窗主体 */
  .dialog-body {
    padding: 15px;
    position: relative;
    z-index: 2;

    .form-group {
      margin-bottom: 12px;

      label {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #606266;
        margin-bottom: 6px;

        .iconfont {
          margin-right: 6px;
          font-size: 14px;
        }
      }

      .form-input {
        width: 100%;
        padding: 10px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        font-size: 13px;
        transition: all 0.3s;
        background: white;
        color: #333;

        &:focus {
          outline: none;
          border-color: var(--bs-theme-color);
        }
      }
    }

    /* 头像上传相关样式 */
    .avatar-upload-group {
      margin-bottom: 20px;
    }

    .avatar-upload-container {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .avatar-preview {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      background-color: #f0f0f0;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.3s;

      &:hover {
        border-color: var(--bs-theme-color);
      }

      .avatar-input {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
      }

      .avatar-upload-btn {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 4px 0;
        text-align: center;
        font-size: 12px;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 1;

        .iconfont {
          font-size: 16px;
        }
      }

      &:hover .avatar-upload-btn {
        opacity: 1;
      }
    }

    .avatar-hint {
      font-size: 12px;
      color: #909399;
      line-height: 1.5;
    }
  }

  /* 弹窗底部 */
  .dialog-footer {
    padding: 12px 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #f5f7fa;
    border-top: 1px solid #dcdfe6;
    position: relative;
    z-index: 2;

    .btn {
      padding: 8px 16px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      &.cancel-btn {
        background: white;
        color: #606266;

        &:hover:not(:disabled) {
          background: #f2f6fc;
          transform: translateY(-1px);
        }
      }

      &.submit-btn {
        background: var(--bs-theme-color);
        color: white;
        border-color: var(--bs-theme-color);

        &:hover:not(:disabled) {
          background: #66b1ff;
          transform: translateY(-1px);
        }
      }
    }
  }
}

/* 浮动动画 */
@keyframes float {
  0%,
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) translateX(5px) rotate(2deg);
  }
  50% {
    transform: translateY(0) translateX(10px) rotate(0deg);
  }
  75% {
    transform: translateY(-10px) translateX(-5px) rotate(-2deg);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .welcome-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .button-group {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .welcome-grid {
    grid-template-columns: 1fr;
  }

  .dialog-content {
    width: 90vw;

    .dialog-body {
      .form-group {
        margin-bottom: 15px;
      }
    }

    .dialog-footer {
      flex-wrap: wrap;

      .btn {
        flex: 1;
        min-width: 100px;
      }
    }
  }
}
</style>